<template>
	<view>
		<view class="header status_bar">
			<view class="back iconfont icon-gengduo-copy" @tap="backPage"></view>
			<view class="text">商品详情</view>
		</view>
		<!-- <view class="clear_box"></view> -->

		<swiper class="swiper_box" :autoplay="true" :interval="3000" :duration="200">
			<block v-for="(item, index) in banner" :key="index">
				<swiper-item style="height: 100%;">
					<view class="swiper-item" style="height: 100%;">
						<image :src="item.image" mode="scaleToFill"></image>
						<view class="num_box">{{ index + 1 }}/{{ banner.length }}</view>
					</view>
				</swiper-item>
			</block>
		</swiper>

		<view class="money_box">
			<view class="m">¥</view>
			<view class="money">378.00</view>
		</view>
		<view class="title_box">特级紫红袍茶叶浓香型礼盒装500g（62泡）</view>

		<view class="message_box">
			<view class="message">快递 免运费</view>
			<view class="message">月销 100</view>
			<view class="message">福建福州</view>

		</view>

		<view class="content_title">
			<view class="line"></view>
			<view class="title">宝贝详情</view>
			<view class="line"></view>
		</view>

		<view class="fwb_box">
			<image src="../../static/img01/fwb01.png" mode="widthFix"></image>
			<image src="../../static/img01/fwb02.png" mode="widthFix"></image>
		</view>

		<view class="footer_box">
			<view class="footer">
				<view class="menu">
					<view class="icon iconfont icon-zaixiankefu"></view>
					<view class="text">客服</view>
				</view>
				<view class="menu" data-url="/pages/goods/submit" @click="gotopage">立即购买</view>

			</view>

		</view>



	</view>
</template>

<script>
	export default {
		data() {
			return {
				info: '',
				banner: [{
						image: '../../static/img01/banner02.png',
					},
					{
						image: '../../static/img01/banner02.png',
					},
					{
						image: '../../static/img01/banner02.png',
					}
				]
			};
		},
		onLoad(options) {
			let that = this;
		},
		onShow() {
			let that = this;
			//that.loadData()
		},
		methods: {
			switch1Change: function(e) {
				console.log('switch1 发生 change 事件，携带值为', e.target.value);
				this.checkeData = e.target.value;
				// if(this.checkeData == true){
				// 	this.whether = 1
				// }else if(this.checkeData == false){
				// 	this.whether = 0
				// }
			},
			loadData() {
				let that = this;
				that.Net._get('user/addresses', {
					per_page: '10',
					page: that.page
				}, res => {
					if (res.code == 200) {
						//console.log(res)
						that.address = res.data.data;
					}
				});
			},
			backPage() {
				uni.navigateBack({});
			},
			gotopage(e) {
				let url = e.currentTarget.dataset.url;
				uni.navigateTo({
					url: url
				});
			}



		},

	};
</script>

<style>
	page {
		background-color: #F7F8FA !important;
		padding-bottom: 0 !important;
	}

	.header .text {
		background-color: #024D4F;
		color: #fff;
	}

	.header .back {
		color: #fff;
	}

	.swiper_box {
		width: 100%;
		height: 50vh;
		position: relative;
		box-shadow: 0px 4px 4.65px 0.35px rgba(51, 51, 51, 0.09);
	}

	.swiper_box .num_box {
		width: 40px;
		height: 20px;
		border-radius: 30px;
		background-color: #cacaca;
		text-align: center;
		line-height: 20px;
		font-size: 12px;
		position: absolute;
		right: 15px;
		bottom: 10px;
		z-index: 99999;
		color: #fff;
		letter-spacing: 2px;
	}

	.swiper_box image {
		width: 100%;
		height: 100%;
	}

	.money_box {
		width: 100%;
		padding-top: 3vw;
		background-color: #fff;
		position: relative;
		display: flex;
		align-items: flex-end;
	}

	.money_box .m {
		color: #D20000;
		font-size: 4vw;
		margin: 0 1vw 0 3vw;
		font-weight: bold;
		margin-bottom: 0.5vw;

	}

	.money_box .money {
		color: #D20000;
		font-size: 6vw;
		font-weight: bold;
	}

	.money_box .y_money {
		font-size: 4vw;
		color: #999;
		margin-left: 5px;
		position: relative;
		text-indent: 0;
		font-weight: 200;
		line-height: 42px;
	}

	.money_box .y_money .line {
		width: 100%;
		height: 1px;
		background-color: #999;
		position: absolute;
		left: 0;
		top: calc(50% - 0.5px);
	}

	.title_box {
		width: 100%;
		padding: 2vw 15px 0;
		font-size: 4vw;
		color: #333;
		line-height: 5vw;
		background-color: #fff;
		font-weight: bold;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}

	.message_box {
		width: 100%;
		padding-bottom: 10px;
		display: flex;
		margin-bottom: 10px;
		background-color: #fff;
		padding-top: 4vw;
	}

	.message_box .message {
		width: 33%;
		font-size: 3.5vw;
		color: #999;
	}

	.message_box .message:nth-child(1) {
		text-align: left;
		margin-left: 15px;
		width: calc(33% - 15px);
	}

	.message_box .message:nth-child(2) {
		text-align: center;
	}

	.message_box .message:nth-child(3) {
		text-align: right;
		margin-right: 15px;
		width: calc(33% - 15px);
	}

	.content_title {
		width: 92%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 6vw auto 4vw;
	}

	.content_title .line {
		height: 1px;
		flex: 1;
		background-color: #D6D6D6;
	}

	.content_title .title {
		color: #999;
		font-size: 4.5vw;
		margin: 0 2vw;
	}

	.fwb_box {
		width: 100%;
	}

	.fwb_box image {
		width: 100%;
		display: block;
	}
	
	.footer_box {
		width: 100%;
		position: fixed;
		bottom: 0;
		background-color: #fff;
	}
	
	.footer {
		width: 100%;
		height: 13.5vw;
		background-color: #ffffff;
		display: flex;
	}
	
	.footer .menu {
		height: 13.5vw;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.footer .menu:nth-child(1) {
		background-color: #fff;
		width: 20vw;
	}
	
	.footer .menu:nth-child(2) {
		background-color: #D20000;
		flex: 1;
		color: #fff;
	}

	
	.footer .menu .icon {
		text-align: center;
		font-size: 5vw;
		color: #565656;
		margin-right: 1vw;
	}
	
	.footer .menu .text {
		text-align: center;
		font-size: 3.5vw;
		color: #666666;
	}
</style>